<template>
  <el-card class="card-body">
    <!--    <el-row :gutter="20">-->
    <!--      <el-form label-width="80px" :model="form" ref="form">-->
    <!--        <el-col :span="6">-->
    <!--          <el-form-item label="名称">-->
    <!--            <el-input-->
    <!--              v-model="form.articleTitle"-->
    <!--              clearable-->
    <!--              :placeholder="placeholderInput"-->
    <!--            ></el-input>-->
    <!--          </el-form-item>-->
    <!--        </el-col>-->
    <!--        <el-col :span="6">-->
    <!--          <el-form-item label="状态">-->
    <!--            <el-select-->
    <!--              v-model="form.status"-->
    <!--              :placeholder="placeholderSelect"-->
    <!--              clearable-->
    <!--              class="full"-->
    <!--            >-->
    <!--              <el-option label="草稿" value="1"></el-option>-->
    <!--              <el-option label="待审核" value="2"></el-option>-->
    <!--              <el-option label="已发布" value="3"></el-option>-->
    <!--              <el-option label="驳回" value="4"></el-option>-->
    <!--              <el-option label="下架" value="5"></el-option>-->
    <!--              <el-option label="回收站" value="6"></el-option>-->
    <!--            </el-select>-->
    <!--          </el-form-item>-->
    <!--        </el-col>-->
    <!--        <el-col :span="6" :offset="12" style="text-align: right">-->
    <!--          <el-button type="primary" @click="handleSearch">查询</el-button>-->
    <!--          <el-button @click="handleReset">重置</el-button>-->
    <!--        </el-col>-->
    <!--      </el-form>-->
    <!--    </el-row>-->
    <el-row>
      <el-button type="primary" style="margin-bottom: 12px" @click="handleAdd"
        >添加
      </el-button>
      <el-table
        :data="tableData"
        class="table-body"
        :header-cell-style="{ background: '#F4F6F9', color: '#1D2129' }"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="name" label="标题">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleCheck(scope.row.id)"
              >{{ scope.row.name }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template slot-scope="scope">
            {{
              scope.row.status === 1
                ? "草稿"
                : scope.row.status === 2
                ? "待审核"
                : scope.row.status === 3
                ? "已上架"
                : scope.row.status === 4
                ? "驳回"
                : scope.row.status === 5
                ? "下架"
                : scope.row.status === 6
                ? "回收站"
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="userName" width="120" label="发布人"></el-table-column>
        <el-table-column
          prop="createDate"
          label="添加时间"
          width="160"
        ></el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row.id)"
            >编辑
            </el-button>
            <el-button :disabled="scope.row.status !== 3" type="text" @click="handleDown(scope.row.id)"
            >下架
            </el-button>
            <el-button :disabled="scope.row.status === 2 || scope.row.status === 3" type="text" @click="handleDelete(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :count="Number(count)"
        :current="1"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-row>
    <Add ref="add" @getParentTableData="getTableData" />
    <Check ref="check" @getParentTableData="getTableData" />
    <Detail ref="detail" @getParentTableData="getTableData" />
  </el-card>
</template>

<script>
import { mapMutations } from "vuex";
import Pagination from "@/components/Pagination.vue";
import { PLEASE_INPUT, PLEASE_SELECT } from "@/util/constant";
import Add from "./Add";
import Check from "./Check";
import Detail from "./Detail";
import {
  deleteImgCollListApi, downImgCollApi,
  getImgCollListApi,
} from "@/api/modules/imgColl.api";

// import { getModuleListApi } from "@/api/modules/modules.api";

export default {
  components: {
    Add,
    Pagination,
    Check,
    Detail
  },
  data() {
    return {
      tableData: [],
      count: 0,
      form: {
        name: "",
        status: "",
      },
      placeholderInput: PLEASE_INPUT,
      placeholderSelect: PLEASE_SELECT,
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      moduleList: [],
    };
  },
  mounted() {
    this.getTableData(this.page);
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    async getTableData({ pageNum = 1, pageSize = 10 }) {
      const res = await getImgCollListApi({ pageNum, pageSize });
      // console.log("res", res);
      if (res) {
        this.tableData = res.records;
        this.count = res.total;
      }
    },
    handleCheck(id) {
      this.$refs.check.init(id);
    },
    handleReset() {},
    handleEdit(id){
      this.$refs.detail.init(id);
    },
    handleAdd() {
      this.$refs.add.init();
    },
    async handleDown(id) {
      await downImgCollApi({idList: [id]})
      this.$message({
        message: "成功",
        type: "success",
      });
      await this.getTableData(this.page);
    },
    async handleDelete(id) {
      await deleteImgCollListApi({ id });
      this.$message({
        message: "成功",
        type: "success",
      });
      await this.getTableData(this.page);
    },

    handleSizeChange(limit) {
      // this.$emit('handleSizeChange',limit);
      // console.log("limit", limit);
      this.getTableData({ pageSize: limit });
    },
    handleCurrentChange(offset) {
      // console.log("offset", offset);
      this.getTableData({ pageNum: offset });
      // this.$emit('handleCurrentChange',offset);
    },
  },
};
</script>
